import { useState, useEffect } from "react";
import { Form, Input, Button, Checkbox } from "antd";
import http from "./../http/http";
import Notice from "../notice/Notice";
import qs from "qs";
const TelLogin = () => {
  const [phonenub, setphonenub] = useState("");
  const [codeText, setcodeText] = useState("获取验证码");
  const onFinish = (values) => {
    console.log("Success:", values);
    let phone = values.tel;
    let code = values.codenub;
    
    let obj = { phone, code };
    // 发起登录请求
    http({
      method: "post",
      url: "/login/loginByPhone",
      data: qs.stringify(obj),
    })
      .then((res) => {
        console.log(res);
        if (res.data.code === 0) {
          sessionStorage.setItem("token", res.data.data);
          Notice("success", "登录成功", "");
          // 跳页面
        } else {
          Notice("error", "登录失败", "请重新登录");
        }
      })
      .catch((err) => {
        console.log(err);
        Notice("error", "网络异常", "请检查网络后重新登录");
      });
  };
  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };
  let timer = null;
  useEffect(() => {
    // telCode()

    return () => {
      clearInterval(timer);
    };
  }, [timer]);
  const telCode = () => {
    let phone = phonenub;
    // console.log(phone);
    // 获取验证码
    http({
      method: "get",
      url: "/login/sendSms?phone=" + phone,
    })
      .then((res) => {
        console.log(res);
        if (res.data.code === 0) {
        } else {
          Notice("error", "获取验证码失败", "请重新获取");
        }
      })
      .catch((err) => {
        console.log(err);
        Notice("error", "网络异常", "请检查网络后重新获取");
      });

    // button 样式
    let nub = 60;
    let text = "";
    timer = setInterval(() => {
      nub = nub - 1;
      // console.log(nub);
      if (nub > 0) {
        text = nub + "s";
        document
          .getElementsByClassName("telcode")[0]
          .setAttribute("disabled", "true");
      } else {
        text = "重新获取";
        document
          .getElementsByClassName("telcode")[0]
          .removeAttribute("disabled");
        clearInterval(timer);
      }
      setcodeText(text);
    }, 1000);
  };
  return (
    <Form
      className="form"
      name="basic"
      labelCol={{
        span: 8,
      }}
      wrapperCol={{
        span: 16,
      }}
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item
        label="电话号码"
        name="tel"
        rules={[
          {
            required: true,
            message: "Please input your username!",
          },
        ]}
      >
        <Input
          autoComplete="true"
          onChange={(event) => setphonenub(event.target.value)}
        />
      </Form.Item>

      <Form.Item
        label="验证码"
        name="codenub"
        rules={[
          {
            required: true,
            message: "Please input your password!",
          },
        ]}
      >
        <Input autoComplete="true" />
      </Form.Item>

      <Form.Item
        name="remember"
        valuePropName="checked"
        wrapperCol={{
          offset: 8,
          span: 16,
        }}
      >
        <Checkbox>Remember me</Checkbox>
      </Form.Item>

      <Form.Item
        wrapperCol={{
          offset: 8,
          span: 16,
        }}
      >
        <Button type="primary" htmlType="submit">
          登录
        </Button>
      </Form.Item>
      <Button onClick={telCode} type="primary" className="telcode">
        {codeText}
      </Button>
    </Form>
  );
};

export default TelLogin;
